<template>
  <div class="admin-console">
    <!-- 控制台头部 -->
    <div class="console-header">
      <h2>中国云咖管理控制台</h2>
      <p class="console-desc">实时监控核心数据，快速访问常用功能</p>
    </div>

    <!-- 数据概览卡片区 -->
    <div class="stats-card-container">
      <!-- 咖啡商品统计 -->
      <el-card class="stats-card" shadow="hover">
        <div class="card-header">
          <i class="fa fa-coffee card-icon coffee-icon"></i>
          <h3 class="card-title">咖啡商品</h3>
        </div>
        <div class="card-body">
          <!-- 加载中显示“--”，避免显示0 -->
          <div class="stat-value">{{ loading ? '--' : coffeeStats.total }}</div>
          <div class="stat-label">总商品数</div>
          <div class="stat-sub">
            <span>上架中：{{ loading ? '--' : coffeeStats.active }}</span>
            <span class="divider">|</span>
            <span>推荐：{{ loading ? '--' : coffeeStats.recommended }}</span>
          </div>
        </div>
        <div class="card-footer">
          <el-button type="text" size="mini" @click="goToPage('/all-coffees')">查看全部</el-button>
          <el-button type="default" size="mini" @click="goToSearch('coffee')">搜索</el-button>
        </div>
      </el-card>

      <!-- 周边商品统计 -->
      <el-card class="stats-card" shadow="hover">
        <div class="card-header">
          <i class="fa fa-gift card-icon merch-icon"></i>
          <h3 class="card-title">周边商品</h3>
        </div>
        <div class="card-body">
          <div class="stat-value">{{ loading ? '--' : merchStats.total }}</div>
          <div class="stat-label">总商品数</div>
          <div class="stat-sub">
            <span>上架中：{{ loading ? '--' : merchStats.active }}</span>
            <span class="divider">|</span>
            <!-- 周边默认无推荐字段，给0避免报错 -->
            <span>推荐：{{ loading ? '--' : (merchStats.recommended || 0) }}</span>
          </div>
        </div>
        <div class="card-footer">
          <el-button type="text" size="mini" @click="goToPage('/merchandise')">查看全部</el-button>
          <el-button type="default" size="mini" @click="goToSearch('merchandise')">搜索</el-button>
        </div>
      </el-card>

      <!-- 订单总数（替换销售统计） -->
      <el-card class="stats-card" shadow="hover">
        <div class="card-header">
          <i class="fa fa-shopping-cart card-icon sales-icon"></i>
          <h3 class="card-title">订单总数</h3>
        </div>
        <div class="card-body">
          <div class="stat-value">{{ loading ? '--' : orderStats.order_total }}</div>
          <div class="stat-label">所有订单数量</div>
          <div class="stat-sub">
            <span>数据实时更新</span>
          </div>
        </div>
        <div class="card-footer">
          <el-button type="default" size="mini" @click="goToPage('/admin/order/list')">查看所有订单</el-button>
        </div>
      </el-card>
    </div>

    <!-- 快速操作区 -->
    <div class="quick-actions">
      <h3 class="section-title">快速操作</h3>
      <div class="action-buttons">
        <el-button icon="fa fa-plus" type="primary" @click="goToPage('/admin/coffee-product/list')">新增咖啡商品</el-button>
        <el-button icon="fa fa-plus" type="success" @click="goToPage('/admin/merchandise-product/list')">新增周边商品</el-button>
        <el-button icon="fa fa-shopping-cart" type="warning" @click="goToPage('/cart')">查看购物车</el-button>
        <el-button icon="fa fa-user" type="info" @click="goToPage('/user-center')">用户中心</el-button>
      </div>
    </div>

    <!-- 最近搜索记录（如果有数据） -->
    <div class="recent-searches" v-if="recentSearches.length > 0">
      <h3 class="section-title">最近搜索</h3>
      <div class="search-tags">
        <el-tag
          v-for="(item, index) in recentSearches"
          :key="index"
          closable
          @close="removeSearch(index)"
          @click="reSearch(item.type, item.keyword)"
        >
          <span v-if="item.type === 'coffee'">[咖啡]</span>
          <span v-else>[周边]</span>
          {{ item.keyword }}
        </el-tag>
      </div>
    </div>

    <!-- 空状态占位（如果没有最近记录） -->
    <div class="empty-placeholder" v-else>
      <div class="empty-icon">
        <i class="fa fa-dashboard"></i>
      </div>
      <p class="empty-text">暂无最近操作记录</p>
      <el-button type="default" @click="goToPage('/user-index')">返回首页</el-button>
    </div>
  </div>
</template>

<script>
import api from '@/api/request'

export default {
  name: 'Dashboard',
  data() {
    return {
      // 1. 咖啡统计数据（默认值避免渲染报错）
      coffeeStats: {
        total: 0,
        active: 0,
        recommended: 0
      },
      // 2. 周边统计数据（默认值+兼容推荐字段）
      merchStats: {
        total: 0,
        active: 0,
        recommended: 0 // 后端若没有，默认显示0
      },
      // 3. 订单统计数据（对应模板中的 orderStats.order_total）
      orderStats: {
        order_total: 0
      },
      // 4. 最近搜索记录（补全缺失的定义）
      recentSearches: [],
      // 5. 加载状态（优化用户体验）
      loading: true
    }
  },
  created() {
    // 并行加载统计数据和最近搜索，提升速度
    Promise.all([
      this.loadStatsData(),
      this.loadRecentSearches()
    ])
  },
  methods: {
    /**
     * 1. 加载核心统计数据（修复接口响应解析）
     * 后端返回格式：{code:200, message:"", data:{统计字段}}
     */
    async loadStatsData() {
      this.loading = true // 开始加载
      try {
        // 并行请求3个接口，减少等待时间
        const [coffeeRes, merchRes, orderRes] = await Promise.all([
          api.get('/coffeeProduct/stats'),
          api.get('/merchandiseProduct/stats'),
          api.get('/order/total')
        ])

        // 解析咖啡数据（判断接口是否成功）
        if (coffeeRes.code === 200 && coffeeRes.data) {
          this.coffeeStats = { ...this.coffeeStats, ...coffeeRes.data }
        }

        // 解析周边数据（兼容后端无recommended字段）
        if (merchRes.code === 200 && merchRes.data) {
          this.merchStats = { ...this.merchStats, ...merchRes.data }
        }

        // 解析订单数据（对应模板中的 orderStats.order_total）
        if (orderRes.code === 200 && orderRes.data) {
          this.orderStats = { ...this.orderStats, ...orderRes.data }
        }

      } catch (err) {
        console.error('加载统计数据失败:', err)
        this.$message.error('数据加载失败，请稍后重试')
        // 错误时重置默认值，避免页面异常
        this.coffeeStats = { total: 0, active: 0, recommended: 0 }
        this.merchStats = { total: 0, active: 0, recommended: 0 }
        this.orderStats = { order_total: 0 }
      } finally {
        this.loading = false // 结束加载（无论成功失败）
      }
    },

    /**
     * 2. 加载最近搜索记录（localStorage持久化）
     */
    loadRecentSearches() {
      try {
        const saved = localStorage.getItem('recentSearches')
        this.recentSearches = saved ? JSON.parse(saved) : []
      } catch (err) {
        console.error('加载最近搜索失败:', err)
        this.recentSearches = []
        localStorage.removeItem('recentSearches') // 清除损坏的存储
      }
    },

    /**
     * 3. 保存最近搜索记录（去重+限制数量）
     */
    saveRecentSearch(type, keyword) {
      if (!keyword.trim()) return // 过滤空关键词

      // 去重：删除相同类型+相同关键词的记录
      this.recentSearches = this.recentSearches.filter(
        item => !(item.type === type && item.keyword === keyword.trim())
      )

      // 添加到列表头部（最新的在前面）
      this.recentSearches.unshift({
        type,
        keyword: keyword.trim(),
        time: new Date().toLocaleString() // 记录时间（可选）
      })

      // 限制最多10条记录，避免存储过多
      if (this.recentSearches.length > 10) {
        this.recentSearches.pop()
      }

      // 保存到localStorage
      localStorage.setItem('recentSearches', JSON.stringify(this.recentSearches))
    },

    /**
     * 4. 删除最近搜索记录
     */
    removeSearch(index) {
      this.recentSearches.splice(index, 1)
      localStorage.setItem('recentSearches', JSON.stringify(this.recentSearches))
    },

    /**
     * 5. 重新搜索（点击最近记录）
     */
    reSearch(type, keyword) {
      this.goToSearch(type, keyword)
    },

    /**
     * 6. 跳转搜索页面
     */
    goToSearch(type, preKeyword = '') {
      const path = type === 'coffee'
        ? '/coffee-search-result'
        : '/merchandise-search-result'

      // 跳转并携带查询参数
      this.$router.push({
        path,
        query: {
          keyword: preKeyword.trim(),
          page: 1,
          limit: 10
        }
      })

      // 保存搜索记录（如果是有效关键词）
      if (preKeyword.trim()) {
        this.saveRecentSearch(type, preKeyword)
      }
    },

    /**
     * 7. 跳转指定页面
     */
    goToPage(path) {
      // 避免重复跳转（优化体验）
      if (this.$route.path !== path) {
        this.$router.push(path)
      }
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.admin-console {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f8f8f8;
  min-height: calc(100vh - 120px);
}

/* 控制台头部 */
.console-header {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.console-header h2 {
  font-size: 22px;
  color: #3D2314;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.console-header h2::before {
  content: "📊";
}
.console-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 数据卡片容器 */
.stats-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

/* 数据卡片样式 */
.stats-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #f0e9e0;
}
.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.coffee-icon { background-color: #8B5A2B; }
.merch-icon { background-color: #4CAF50; }
.sales-icon { background-color: #E63946; }
.card-title {
  font-size: 16px;
  color: #333;
  margin: 0;
  font-weight: 600;
}

/* 卡片内容 */
.card-body {
  padding: 20px;
  text-align: center;
}
.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #3D2314;
  margin: 0 0 5px 0;
}
.stat-label {
  font-size: 14px;
  color: #666;
  margin: 0 0 10px 0;
}
.stat-sub {
  font-size: 12px;
  color: #888;
}
.divider {
  margin: 0 8px;
  color: #ddd;
}

/* 卡片底部按钮 */
.card-footer {
  padding: 10px 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 快速操作区 */
.quick-actions {
  margin-bottom: 30px;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.section-title {
  font-size: 16px;
  color: #3D2314;
  margin: 0 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.action-buttons .el-button {
  border-radius: 6px;
}

/* 最近搜索记录 */
.recent-searches {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 30px;
}
.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.search-tags .el-tag {
  cursor: pointer;
  padding: 5px 12px;
  background-color: #f5f5f5;
  border-color: #eee;
}
.search-tags .el-tag:hover {
  background-color: #f0e9e0;
}

/* 空状态占位 */
.empty-placeholder {
  text-align: center;
  padding: 60px 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.empty-icon {
  font-size: 48px;
  color: #ddd;
  margin-bottom: 15px;
}
.empty-text {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .stats-card-container {
    grid-template-columns: 1fr;
  }
  .action-buttons {
    flex-direction: column;
  }
  .action-buttons .el-button {
    width: 100%;
  }
}
</style>